组件列表页面+组件拖拽+页面编写，iframe实现通讯+跨源通信类实现

2023-07-09 13:21| 来源: 网络整理| 查看: 265

定义组件数据结构componentlist， import componentlist from ‘@/config/component-list’ 组件内部有组件图标，组件名称，组件个数的最大数量选中的时候有高亮达到最大数量，组件的状态由可选变为不可选折叠面板，用了el-collapse, 属性有{v-model} el-collapse-item {v-for, :key,class,:title,:name} 组件内容用了ul标签，li表示每个组件{v-for，:key, :class, :draggable,@dragstart,@dragend} draggableEnble() ? li标签的内容，字体图标，样式，

{{component.name}} {{`${componentMap[component.data.component] || 0}/${component.maxNumForAdd}`}} methods：{ ...mapMutations['SET_DATA_START'], draggableEnable(component) { let curNum = this.componentMap[component.data.component] || 0 return curNume // 1. 改变拖拽状态为false this.SET_DATA_START(false), } }, computed: { componentMap() { return this.$store.getters.pageComponentTotalMap } }

draggableEnable 判断是否可以点击传入component，允许点击时候，组件使用的数量不能超过组件使用的最大数量。

获取组件的使用次数curNum返回如果curNumpageData.name}} import settings from '@/config' import {mapState} from 'vuex' methods: { onloadH5() {}, onDragover() { }, onDragout() { } }, computed: { ...mapState(['pageData','previewHeight']) previewSrc() { return seetings.decorateViewSrc + `?pageId=${this.$route.query.id || ''}` } }

pageData 请求的后台接口数据 store定义 UPDATA_COMPONENT VIEW_UPDATA

和crs通信

onloadH5 的逻辑：

跨源通信类实现 targetOrigin: 目标的地址 message: 接收目标窗口数据的监听

Messager类构造函数，传递targetOrigin，赋值targetOrigin，定义actions为空对象，表示当前哪些监听函数。监听传送数据的实例函数，messageListener 在函数中，event参数

跨源通信类实现

定义type，用event下的data存在，获取data下的type判断origin是否等于targetOrigin，判断type存在？this下的actions的type存在吗？都存在，调用type方法，传入data下的value属性。用addEventListener监听，message事件，传递messageListener定义一个on方法，接收type，第二个参数是回调函数cb，通过actions下的type赋值给cb，返回this发送指定消息的函数emit，接收type，value，通过获取到iframe窗口的实例，1.用getElementById 获取proviewIframe，dom节点，拿到节点后获取contentWindow引用，赋值给win； 2. 使用postMessage发送消息，传入一个对象，包括type，value,taargetOrigin；3.返回一个this移出destroy，用removeEventListener取消监听 export class Messager { constructor(targetOrigin) { this.targetOrigin = targetOrigin this.actions = {} this.messageListener = (event) => { const type = event.data && event.data.type if (event.origin === targetOrigin && type && this.actions[type]) { this.actions[event.data.value] } } window.addEventListener('message',this.messageListener) } on(type,cb) { this.actions[type] = cb return this } emit(type,value) { const win = document.getElementId('proviewIframe').contentWindow win.postMessage({ type,value },this.targetOrigin) return this }, destroy(){ window.removeEventListener('message',this.messageListener) } }

调用类

初始化跨源通信对象，messager，传入decorateOrigin

import {Messager} from '@/utils' import settings from '@/config' const messager = new Messager(settings.decorateOrigin)

onloadH5 的逻辑： h5页面出现： iframe加载完成后，调用方法，与crs通信。

this.$store.commit('VIEW_UPDATA') 调用mutations，使用commit，的VIEW_UPDATA; VIEW_UPDATA接收的参数为state，value；向crs发送消息：调用Messager实例下的emit函数；emit接收type和value，type是标识，pageChange；发送的数据：disabledRestHeight = false接收进来；还有disabledRestHeight 和 value：state的pageData VIEW_UPDATA(state,disabledRestHeight = false) { messager.emit('pageChange',{ disabledRestHeight， value：state.pageData }) }

onDragover实现逻辑：组件放置区域实现：

event，拿到pageY的高度，通过this.$ref.pageView下的scrollTop拿到滚动条的高度，通过测量拿到固定高度，出来的值就是鼠标相对组件1的高度为dropTop。

拿到生成组件的索引，计算如：3-9

计算鼠标相对于组件的位置。crs系统拿到页面数据，渲染完，计算每个组件相对于cms的高度。引入mapActions，拿到initMessage

store中定义initMessage，用于数据监听。监听h5页面高度的变化。使用message下的on的方法，监听pageHeightChange，接收一个回调函数，height拿到回传的数据，如果没有回传就是768；接收一个list，是组件数据；通过commit调用UPDATE_PAGE_HEIGHT，传入height和list；UPDATE_PAGE_HEIGHT接收两个参数，一个是state，一个是height，list； height赋值给previewHeight，componentsTopList;

on，监听页面数据pagaChange的变化，拿到crs回传回来的数据，放到UPDATA_COMPONENT

on, 监听setActive，监听SET_ACTIVE_ID, SET_SETTYPE, 定义SET_ACTIVE_ID，修改activeComponentId，value SET_SETTYPE，修改setType

调用，用mounted调用initMessage；引入componentsTopList

用for循环，1.拿到当前组件的位于cms系统的高度value；拿到上一个组件的高度，如果不存在给0；拿到中间的位置。

判断，如果是第一个组件，鼠标的位置小于中间，代表鼠标位于组件1的上部，组件添加的索引值为0，定义addIndex为0 ；break 如果不是第一个，拿鼠标的位置，组件高度的一半，在以上，取当前的索引；以下，索引加1

如果addComponentIndex 和当前的索引值相等，表示生成。如果不相等， SET_DRAG_INDEX，传入index；VIEW_ADD_PREVIEW传入inex

SET_DRAG_INDEX addComponentIndex = value；VIEW_ADD_PREVIEW，emit传递

onDragover(event) { const viewWrapTop = 191 const dropTop = event.pageY + this.$refs.pageView.scrollTop - viewWrapTop let addIndex = 0 for (let i = this.componentsTopList.length - 1; i>=0;i--) { const value = this.componentsTopList[i] const prev = this.componentsTopList[i-1] || 0 const _half = (value - prev) / 2 if (i=== 0 && dropTop (value-_half)) { addIndex = i + 1 break } } if (this.addComponentIndex === addIndex ) return this.SET_DRAG_INDEX(addIndex) this.VIEW_ADD_PREVIEW(addIndex) }

onDragout实现逻辑：

通过preventDefault清除默认事件，判断预添加位存在吗？通过addComponentIndex 如果不为null 那么就存在，将SET_DRAG_INDEX设置为null告诉crs清除组件放置区域： VIEW_DELETE_PREVIEW，设置为null onDragout(event) { event.preventDefault() if (this.addComponentIndex != null ) { this.SET_DRAG_INDEX(null) this.VIEW_DELETE_PREVIEW() } }

store中定义 VIEW_DELETE_PREVIEW：告诉crs删除传递参数deletePreview

VIEW_DELETE_PREVIEW() { messager.emit('deletePreview') }

【本文地址】

公司简介

联系我们